
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>修改密码界面</title>
<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Roboto:400,700" />
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/fontawesome.min.css" />
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/templatemo-style.css">
<style type="text/css">
.code {
	background: url(code_bg.jpg);
	font-family: Arial;
	font-style: italic;
	color: blue;
	font-size: 30px;
	border: 0;
	padding: 2px 3px;
	letter-spacing: 3px;
	font-weight: bolder;
	float: left;
	cursor: pointer;
	width: 150px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	vertical-align: middle;
}

a {
	text-decoration: none;
	font-size: 12px;
	color: #288bc4;
}

a:hover {
	text-decoration: underline;
}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<!-- https://jquery.com/download/ -->
<script src="../js/bootstrap.min.js"></script>
<!-- https://getbootstrap.com/ -->
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery-3.5.1.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
</head>
<script type="text/javascript">
		function updatePassword() {
            username = $("#username").val()
            newPassword = $("#newPassword").val()
			var arry;
            var username_md5 = md5(username);
            var password_md5 = md5(newPassword);
            var user_id;
            $.ajax({
                url: "http://localhost:8080/voting-system/getUserId",
                type: "post",
                success:function (data) {
                	arry=data;
                	user_id=arry["UserId"];
                	$.ajax({
                        url: "http://localhost:8080/voting-system/updatePasswordServlet",
                        type: "post",
                        success:function (data) {
                        	if(data.updateUserPasswd=false){
                        		alert("修改失败！")
                        	}else{
                        		alert("修改成功！")
                        		window.location.href='../login.html'
                        	}
                        },
                        dataType: "json",
                        data:{user_id:user_id, password:password_md5}
                    });
                },
                dataType: "json",
                data:{username:username}
            });
        }
		</script>
<body>
	<div>
		<nav class="navbar navbar-expand-xl">
			<div class="container h-100">

				<button class="navbar-toggler ml-auto mr-0" type="button"
					data-toggle="collapse" data-target="#navbarSupportedContent"
					aria-controls="navbarSupportedContent" aria-expanded="false"
					aria-label="Toggle navigation">
					<i class="fas fa-bars tm-nav-icon"></i>
				</button>
			</div>
		</nav>
	</div>

	<div class="container tm-mt-big tm-mb-big">
		<div class="row">
			<div class="col-12 mx-auto tm-login-col">
				<div class="tm-bg-primary-dark tm-block tm-block-h-auto">
					<div class="row">
						<div class="col-12 text-center">
							<h2 class="tm-block-title mb-4">修改密码</h2>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-12">
							<form method="post" class="tm-login-form">
								<!-- 弹出警告窗 -->
								<div class="alert alert-warning alert-dismissible hide" role="alert">
									<button type="button" class="close fade in" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<br>
								</div>
								<div class="form-group">
									<input name="username" type="text" class="form-control validate" id="username"
										placeholder="用户名"  />
								</div>
								<div class="form-group">
									<input name="old" type="text" class="form-control validate" id="oldPassword"
										placeholder="原密码"  />
								</div>
								<div class="form-group mt-3">
									<input name="new" placeholder="新密码" type="password" id="newPassword"
										class="form-control validate"  />
								</div>

								<div class="form-group mt-3">
									<input name="pass" placeholder="确认密码" type="password" id="newPasswordr"
										class="form-control validate"  />
								</div>



								<div class="form-group mt-4">
									<button type="button" onclick="updatePassword()"
										class="btn btn-primary btn-block text-uppercase">确认修改</button>

								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script >
$("#username").blur(function () {
    username = $("#username").val()
    if (username == "") {
        $(".alert-warning").html("<strong>警告：</strong>用户名不能为空！");
        $(".alert-warning").removeClass("hide");
    } else {
        $(".alert-warning").addClass("hide");
    }
});
$("#oldPassword").blur(function () {
	oldPassword = $("#oldPassword").val()
    if (oldPassword == "") {
        $(".alert-warning").html("<strong>警告：</strong>原密码不能为空！");
        $(".alert-warning").removeClass("hide");
    } else {
        $(".alert-warning").addClass("hide");
    }
});

//密码合法性验证
$("#newPassword").blur(function () {
	newPassword = $("#newPassword").val();
    if (newPassword == "") {
        $(".alert-warning").html("<strong>警告：</strong>新密码不能为空！");
        $(".alert-warning").removeClass("hide");
    } else {
        $(".alert-warning").addClass("hide");
    }
});
$("#newPasswordr").blur(function () {
		newPasswordr = $("#newPasswordr").val();
	    if (newPasswordr != newPassword) {
	        $(".alert-warning").html("<strong>警告：</strong>确认密码错误！");
	        $(".alert-warning").removeClass("hide");
	    } else {
	        $(".alert-warning").addClass("hide");
	    }
	});

</script>
